@import (reference) '../../style/mixin.less';

.record-nav-con {
    position: relative;
    height: (110 / @rootValue);

    .record-nav {
        height: 100%;
        .flex;

        background-color: #fff;

        .nav-link {
            flex: 1;
            height: (60 / @rootValue);
            font-size: (36 / @rootValue);
            line-height: (60 / @rootValue);
            text-align: center;
            transition: color 300ms;
        }

        a:nth-of-type(1),
        a:nth-of-type(2) {
            border-right: 1px solid #ddd;
        }

        .active {
            color: @base-color;
        }
    }

    .nav-flag-bar {
        position: absolute;
        bottom: 0;
        left: 17%;
        width: (130 / @rootValue);
        height: (2 / @rootValue);
        margin-left: (-65 / @rootValue);
        background-color: @base-color;
        border-radius: (1 / @rootValue);
        transition: left 300ms;
    }
}
